<template>
  <div class="carousel">
    <div class="carousel-images">
      <img :src="require('@/images/' + images[currentImage])" alt="carousel-image"/>
    </div>
    <div class="carousel-indicators">
      <div
          v-for="(image, index) in images"
          :key="index"
          class="indicator"
          :class="{ active: index === currentImage }"
          @click="goToImage(index)">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        't1.jpg',
        't2.jpg',
        't3.jpg'
      ],
      currentImage: 0,
      timer: null
    };
  },
  mounted() {
    this.startCarousel();
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
  methods: {
    startCarousel() {
      this.timer = setInterval(() => {
        this.nextImage();
      }, 3000);
    },
    nextImage() {
      this.currentImage = (this.currentImage + 1) % this.images.length;
    },
    goToImage(index) {
      clearInterval(this.timer);
      this.currentImage = index;
      this.startCarousel();
    }
  }
};
</script>

<style scoped lang="less">
.carousel {
  position: relative;
  width: 100%;
  height: 420px;
  overflow: hidden;

  .carousel-images {
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .carousel-indicators {
    position: absolute;
    right: 10px;
    top: 50%;
    display: flex;
    flex-direction: column;
    transform: translateY(-50%);

    .indicator {
      width: 15px;
      height: 15px;
      margin: 5px;
      background-color: lightgray;
      border-radius: 50%;
      cursor: pointer;

      &.active {
        background-color: darkgray;
      }
    }
  }
}
</style>
  